<template>
  <div class="container">
    <TopBar></TopBar>
    <RouterBar></RouterBar>
    <LeftMenu></LeftMenu>
    <Main />
    <Footer />
  </div>
</template>
<script>
import TopBar from "@/components/common/TopBar.vue";
import RouterBar from "@/components/common/RouterBar";
import LeftMenu from "@/components/common/LeftMenu";
import Footer from "@/components/common/Footer.vue";
import Main from "@/components/common/Main.vue";

export default {
  data() {
    return {};
  },
  created() {
    if (sessionStorage.leftMenus) {
      this.$store.commit(
        "initRouterMenus",
        JSON.parse(sessionStorage.leftMenus)
      );
      this.$store.commit("initRouterIndex", sessionStorage.routerIndex);
    }
  },
  components: { TopBar, RouterBar, LeftMenu, Main, Footer },
  computed: {
    leftMenus() {
      return this.$store.state.routerMenus;
    },
    routerIndex() {
      return this.$store.state.routerIndex;
    },
  },
  watch: {
    leftMenus: {
      handler(newValue) {
        sessionStorage.leftMenus = JSON.stringify(newValue);
      },
      deep: true,
    },
    routerIndex: {
      handler(newValue) {
        sessionStorage.routerIndex = newValue;
      },
      deep: true,
    },
  },
};
</script>



<style scoped>
.container {
  width: 100%;
  height: 100vh;
  background-color: #f5f7f9;
}
</style>
